import ButtonIcon from '@/components/ButtonIcon';
import SvgIcon from '@/components/SvgIcon';
import { getSiderCollapse, toggleSiderCollapse } from '@/store/modules/appStore';

/**
 * MenuToggler 侧边栏折叠/展开按钮组件
 *
 * @param arrowIcon 是否使用箭头风格图标
 * @param className 自定义样式类名
 */
interface Props {
	/** 是否使用箭头风格图标 */
	arrowIcon?: boolean;
	/** 自定义样式类名 */
	className?: string;
}

/** NumberBool 类型，0 表示 false，1 表示 true */
type NumberBool = 0 | 1;

/** 图标映射表，根据是否箭头风格和是否折叠选择不同图标 */
const icons: Record<NumberBool, Record<NumberBool, string>> = {
	0: {
		0: 'line-md:menu-fold-left',
		1: 'line-md:menu-fold-right'
	},
	1: {
		0: 'ph-caret-double-left-bold',
		1: 'ph-caret-double-right-bold'
	}
};

/**
 * MenuToggler 组件，控制侧边栏折叠/展开
 *
 * @param props 组件参数
 * @returns React.ReactNode
 */
const MenuToggler = ({ arrowIcon, className }: Props) => {
	// 获取侧边栏折叠状态
	const siderCollapse = useAppSelector(getSiderCollapse);
	// 获取 dispatch 方法
	const dispatch = useAppDispatch();
	// 是否使用箭头风格图标
	const isArrowIcon = Number(arrowIcon || false) as NumberBool;
	// 当前是否折叠
	const isCollapsed = Number(siderCollapse || false) as NumberBool;
	// 根据状态选择图标
	const icon = icons[isArrowIcon][isCollapsed];

	return (
		<ButtonIcon
			className={className}
			tooltipContent={siderCollapse ? '展开菜单' : '收起菜单'}
			tooltipPlacement="bottomLeft"
			onClick={() => dispatch(toggleSiderCollapse())}
		>
			<SvgIcon icon={icon} />
		</ButtonIcon>
	);
};

export default MenuToggler;
